<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专业</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <!-- <script src="/admin/js/token.js"></script>-->
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <blockquote class="layui-elem-quote quoteBox mod_default_box">
        </blockquote>
        <div class="layui-card-body">
            <table class="layui-hide" id="t" lay-filter="t"></table>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="tb">
    <div class="layui-container" style="margin-left:0px;">
        <a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-addition"></i>新增图片</a>
    </div>
</script>
<script type="text/html" id="stu-toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-edit"></i>删除</a>
</script>
<script type="text/html" id="checkboxTpl">
    <input type="checkbox" name="imgstatus" value="{{d.imgid}}" title="启用" lay-filter="lockDemo" {{ d.imgstatus == 1 ? 'checked' : '' }} />
</script>
<script src="/js/layui/layui.all.js"></script>
<script>
    function GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var a = decodeURI(decodeURI(window.location.search));
        var r = a.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        if(r!=null)return  unescape(r[2]); return null;
    }
    var $ = layui.$
    var table = layui.table;
    var form = layui.form;
    var upload = layui.upload;
    var topicid = GetQueryString("type");
    table.render({
        elem: '#t',
        id: 'tt',
        url: '/lunbo/select?type='+topicid,
        toolbar: '#tb',
        cols :[
            [{field: 'id', title: '序号', width: '10%', type:'numbers', align: 'center'},
                {field: 'imgsrc', title: '轮播图', width: '20%', align: 'center',templet: function (d) {
                    if(d.imgsrc)
                      return   '<div><img src="/upload/'+d.imgsrc+'" style="width:70px;height:50px;" onclick="previewImgs(this)"></div>'
                    }},
                {field:'imgstatus',align : 'center', title:'是否启用',width:110, templet: '#checkboxTpl', sort: true},
                {toolbar:"#stu-toolbar",align : 'center',title:"操作",fixed: 'right'}
            ]
        ]
        ,page: true
        ,page: {
        curr: layui.data("index_page").index
    },
    done: (res, curr, count) => {
        layui.data("index_page", {
            key: 'index',
            value: curr
        });
    }

    });

    //新增操作
    table.on('toolbar(t)', function (obj) {
        var data = obj.data;
        // console.log(data);
        if (obj.event === 'add') {
            var index = layer.open({
                type: 2,
                title: "添加轮播图片",
                area: ['95%', '95%'],
                skin: 'layui-layer-molv',
                content: encodeURI('addLunbo.html?type='+topicid), //这里content是一个普通的String
                end: function(){
                    location.reload();
                }
            });
            layer.full(index);
        }
    });
    // 编辑和删除操作
    table.on('tool(t)', function (obj) {
        var rowdata = obj.data;
        if (obj.event === 'edit') {
            layer.open({
                type: 2
                ,title: "修改轮播图"
                ,area: ['90%', '90%']
                ,content: (encodeURI("editLunbo.html?id="+rowdata.imgid)) //这里content是一个普通的String
                ,end:function () {
                    table.reload("tt")
                }
            });
        }else if(obj.event=="delete"){
            layer.confirm("确定删除该图片?", ["确定", "取消"], function () {
                $.ajax({
                    url: '/lunbo/delete',
                    type:"post",
                    data: {id:rowdata.imgid},
                    success: function (data) {
                        if (data.code == 200) {
                            layer.msg("删除成功", {icon: 1, time: 1000}, function () {
                                table.reload("tt")
                            });
                        } else {
                            layer.msg(data.msg, {icon: 1, time: 1000});
                        }
                    }
                })
            });
        }

    });
    //监听启用操作
    form.on('checkbox(lockDemo)', function(obj){
        var id = this.value;
        var status = obj.elem.checked;
        var zhuangtai;
        if(status){
            zhuangtai=1;
        }else{
            zhuangtai=0;
        }
        $.ajax({
            url:"/lunbo/upStatus"
            ,type:"post"
            ,data:{id:id,status:zhuangtai}
            // ,contentType: 'application/json'
            ,success:function (data) {
                if(data.code==200){
                    layer.close(layer.index);
                    layer.msg('操作成功');
                }else if(data.code==500){
                    layer.msg('操作失败');
                }else{
                    layer.msg('没有权限');
                }
            }
            ,error:function () {
                console.log("ajax error");
            }
        });
    });



</script>
<script>
    function previewImgs(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='800px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [800 + 'px', 550 + 'px'],// area: [width + 'px',height+'px'],  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
</script>
</html>
